<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <!-- 引入重置样式表 reset.css -->
    <link rel="stylesheet" href="../css/reset.css">
    <!-- 引入商品详情样式表 productDetails.css -->
    <link rel="stylesheet" href="../css/productDetails.css">
</head>

<body>
    <!-- 页头 -->
    <header id="baseHead">
        <div class="wrapper">
            <!-- 右边logo区域 -->
            <section class="logo">
                <a href="#" title="返回首页">
                    <img src="../static/image/panda-logo.png" alt="logo">
                </a>
                <div class="right">
                    <h3>熊猫优选</h3>
                    <span>XIONG MAO YOU XUAN</span>
                </div>
            </section>
            <!-- 中间搜索区域 -->
            <div class="search">
                <span></span>
                <input type="text" name="find" placeholder="搜索商品，发现更多优惠">
                <p onclick="searchthing()">搜索</p>
            </div>
            <!-- 右边品牌保证区域 -->
            <section class="advantage">
                <ul>
                    <li>
                        <img src="../static/image/panda-logo1.png" alt="全程包邮">
                        <span>全程包邮</span>
                    </li>
                    <li>
                        <img src="../static/image/panda-logo2.png" alt="7天退换">
                        <span>7天退换</span>
                    </li>
                    <li>
                        <img src="../static/image/panda-logo3.png" alt="品质保证">
                        <span>品质保证</span>
                    </li>
                </ul>
            </section>
            <!-- 用户信息区域 -->
            <section id="userinfor">
                <img src="../static/image/懵.jpg" alt="用户头像" id="header">
                <label for="#">用户昵称：叶叶叶<span id="nick"></span></label>
            </section>
        </div>
    </header>
    <!-- 导航栏 -->
    <div id="nav">
        <ul>
            <li id="homePages" onclick="homePages()">首页</li>
            <li id="packageMail" onclick="packageMail()">9块9包邮</li>
            <li id="ticket" onclick="ticket()">超值大额券</li>
            <li id="coolOutfit" onclick="coolOutfit()">降温急救穿搭</li>
        </ul>
    </div>
    <!-- 商品详情界面 -->
    <div id="product-detail">
        <!-- 商品详情界面模板 -->
        <script type="text/html" id="productDetails-list">
            <div class="infoshop">
                <div class="shoppinginfoleft">
                    <!-- 轮播图+放大镜 -->
                    <div class="glass">
                        <div class="showphoto">
                            <img src="{{detail.photo[0].url}}" alt="" id="showImg">
                            <div class="bigImg"></div>
                        </div>
                        <div class="imglist">
                            {{each detail.photo}}
                            <img src="{{$value.url}}" alt="" onclick="clickEle('{{$value.url}}')">
                            {{/each}}
                        </div>
                    </div>
                    <div id="bigphoto">
                        <img src="#" alt="" class="bigimage">
                    </div>
                    <div class="shoptextinfo">
                        <div class="infotitle">
                            {{if detail.platform == 1}}
                            <img src="../static/image/panda-taobao.png" alt="网络出错">
                            {{else}}
                            <img src="../static/image/panda-cat.png" alt="网络出错">
                            {{/if}}
                            <p class="baoyou">{{detail.isFreePostage?'包邮':'不包邮'}}</p>
                            <p class="jieshao">{{detail.title}}</p>
                        </div>
                        <div class="youhui">
                            <p class="oprice">原价￥{{detail.tbOriginPrice}}</p>
                            <div>
                                <p>券后价:</p>
                                <p>￥<span>{{detail.price}}</span><span>{{detail.couponValue}}</span></p>
                                <p><span>{{detail.saleNum}}</span>人已购买</p>
                            </div>
                        </div>
                        <div class="youhuidate">优惠有效期:{{detail.expireDate}}</div>
                        <div class="joincart" onclick="join({{detail}})">加入购物车</div>
                    </div>
                </div>
                <div class="shoppinginforight">
                    <p class="shopxinxi">—————卖家信息—————</p>
                    <img src={{shangjia.picUrl}} alt="网络出错">
                    <p class="shopname">{{shangjia.title}}</p>
                    <p class="pingfenleibie"><span>描述</span><span>服务</span><span>物流</span></p>
                    <p class="pingfen">
                        <span>{{shangjia.itemScore}}</span><span>{{shangjia.serviceScore}}</span><span>{{shangjia.deliveryScore}}</span>
                    </p>
                </div>
            </div>
            <div class="infobottom">
                {{each detail.photo}}
                <img src="{{$value.url}}" alt="">
                {{/each}}
            </div>
        </script>
    </div>


    <!-- 购物车 -->
    <div id="goCart">
        <img src="../static/image/panda-cart.png" alt="购物车图" onclick="goingCart()">
    </div>
    <!-- 回到顶部 -->
    <div id="back-top">
        <img src="../static/image/back-top.png" alt="回到顶部">
    </div>
    <!-- 页脚 -->
    <footer id="footer">
        <div class="base-footer">
            <div class="footer-container">
                <img src="../static/image/panda-logo.png" alt="logo">
                <div class="footer-content">
                    <h1>熊猫优选</h1>
                    <p>年轻人网购首选</p>
                    <p>购物领券更省钱</p>
                </div>
                <div class="about-us">
                    <p><span>|</span><a href="#">下载app</a></p>
                </div>
                <div class="footer-buttom">
                    <img src="../static/image/panda-police.png" alt="公安logo" class="police-icon">
                    <p>
                        <span>浙公安网备案 33010602009949号-1</span>
                        ICP备案号:
                        <a href="#">浙ICP备17012864号-1</a>
                        |
                    </p>
                    <img src="../static/image/panda-police2.png" alt="公安logo" class="police-icon">
                    <p>
                        <a href="#">证照信息</a>
                    </p>
                </div>
            </div>
        </div>
    </footer>
    <!-- 安全认证lofo -->
    <div id="security">
        <a href="#"><img src="../static/image/panda-lable.png" alt="安全认证lofo"></a>
    </div>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/template-web.js"></script>
    <script src="../js/productDetails.js"></script>
</body>

</html>